<template>
    <view class="container">
        <view class="mood-level-selector">
            <text class="section-title">今天的心情</text>
            <view class="mood-levels">
                <view 
                    v-for="level in moodLevels" 
                    :key="level.value"
                    class="mood-level-item"
                    :class="{ 'selected': selectedMoodLevel === level.value }"
                    @click="selectMoodLevel(level.value)"
                >
                    <text>{{ level.label }}</text>
                </view>
            </view>
        </view>

        <view class="mood-description">
            <text class="section-title">心情描述</text>
            <textarea 
                v-model="moodDescription" 
                placeholder="记录下今天的感受..."
                maxlength="500"
            ></textarea>
        </view>

        <view class="mood-tags">
            <text class="section-title">心情标签</text>
            <tag-selector 
                :tags="availableTags"
                v-model="selectedTags"
            />
        </view>

        <view class="mood-images">
            <text class="section-title">添加图片</text>
            <view class="upload-container">
                <view 
                    v-for="(image, index) in uploadedImages" 
                    :key="index" 
                    class="image-preview"
                >
                    <image :src="image" mode="aspectFill"></image>
                    <text class="delete-icon" @click="deleteImage(index)">×</text>
                </view>
                <view 
                    v-if="uploadedImages.length < 9" 
                    class="upload-btn"
                    @click="chooseImage"
                >
                    <text>+</text>
                </view>
            </view>
        </view>

        <button class="submit-btn" @click="submitMoodRecord" :loading="isSubmitting">保存心情</button>
    </view>
</template>

<script>
import moodApi from '@/api/mood';
import uploadApi from '@/api/upload';
import TagSelector from '@/components/TagSelector.vue';

export default {
    components: {
        TagSelector
    },
    data() {
        return {
            moodLevels: [
                { value: 1, label: '非常糟糕' },
                { value: 2, label: '糟糕' },
                { value: 3, label: '一般' },
                { value: 4, label: '好' },
                { value: 5, label: '非常好' }
            ],
            availableTags: ['工作', '生活', '学习', '运动', '社交', '家庭'],
            selectedMoodLevel: null,
            moodDescription: '',
            selectedTags: [],
            uploadedImages: [],
            isSubmitting: false
        }
    },
    methods: {
        selectMoodLevel(level) {
            this.selectedMoodLevel = level;
        },
        chooseImage() {
            uni.chooseImage({
                count: 9 - this.uploadedImages.length,
                sourceType: ['album', 'camera'],
                success: async (res) => {
                    try {
                        // 上传图片并获取线上地址
                        const uploadPromises = res.tempFilePaths.map(filePath => 
                            uploadApi.uploadImage(filePath)
                        );
                        const uploadedUrls = await Promise.all(uploadPromises);
                        this.uploadedImages = [...this.uploadedImages, ...uploadedUrls];
                    } catch (error) {
                        uni.showToast({
                            title: '图片上传失败',
                            icon: 'none'
                        });
                    }
                }
            });
        },
        deleteImage(index) {
            this.uploadedImages.splice(index, 1);
        },
        async submitMoodRecord() {
            // 验证数据
            if (!this.selectedMoodLevel) {
                uni.showToast({
                    title: '请选择心情等级',
                    icon: 'none'
                });
                return;
            }

            // 防止重复提交
            if (this.isSubmitting) return;
            this.isSubmitting = true;

            try {
                // 准备提交数据
                const moodRecord = {
                    moodLevel: this.selectedMoodLevel,
                    moodDescription: this.moodDescription,
                    moodTags: this.selectedTags.join(','),
                    moodImages: this.uploadedImages.join(','),
                    recordDate: new Date().toISOString()
                };

                // 调用后端接口提交数据
                await moodApi.createMoodRecord(moodRecord);

                uni.showToast({
                    title: '心情记录成功',
                    icon: 'success',
                    success: () => {
                        setTimeout(() => {
                            uni.navigateBack();
                        }, 1500);
                    }
                });
            } catch (error) {
                uni.showToast({
                    title: '心情记录失败',
                    icon: 'none'
                });
            } finally {
                this.isSubmitting = false;
            }
        }
    }
}
</script>

<style scoped>
.container {
    padding: 20rpx;
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
}

.mood-levels {
    display: flex;
    justify-content: space-between;
}

.mood-level-item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    margin: 0 10rpx;
    background-color: #f0f0f0;
    border-radius: 10rpx;
}

.mood-level-item.selected {
    background-color: #3cc51f;
    color: white;
}

.mood-description textarea {
    width: 100%;
    min-height: 200rpx;
    background-color: #f0f0f0;
    padding: 20rpx;
    border-radius: 10rpx;
}

.upload-container {
    display: flex;
    flex-wrap: wrap;
}

.image-preview {
    position: relative;
    width: 200rpx;
    height: 200rpx;
    margin: 10rpx;
}

.image-preview image {
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
}

.delete-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 40rpx;
    height: 40rpx;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    line-height: 40rpx;
    border-radius: 0 10rpx 0 10rpx;
}

.upload-btn {
    width: 200rpx;
    height: 200rpx;
    margin: 10rpx;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48rpx;
    color: #999;
    border-radius: 10rpx;
}

.submit-btn {
    margin-top: 40rpx;
    background-color: #3cc51f;
    color: white;
    border-radius: 10rpx;
}
</style> 